<template>
  <div class="main">
    <img :src="musicList.al.picUrl" alt="" class="bgimg">
    <div class="detailTop">
      <div class="detailTopLeft">
        <svg class="icon" aria-hidden="true" @click="backHome">
          <use xlink:href="#icon-xitongfanhui"></use>
        </svg>
        <div class="leftMarquee">
          <Vue3Marquee style="color: #fff">
            {{ musicList.al.name }}
          </Vue3Marquee>

          <span v-for="item in musicList.ar" :key="item"> {{ item.name }} </span>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-next"></use>
          </svg>
        </div>
      </div>
      <div class="detailTopRight">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-yingyewangdian"></use>
        </svg>
      </div>
    </div>
    <div class="detailContent" v-show="!isLyricShow">
      <img src="@/assets/needle-ab.png" alt="" class="img_needle" :class="{ img_needle_active: !isbtnShow }">
      <img src="@/assets/cd.png" alt="" class="img_cd">
      <img :src="musicList.al.picUrl" alt="" class="img_ar" @click="isLyricShow = true"
        :class="{ img_ar_active: isbtnShow, img_ar_pauesd: isbtnShow }">

    </div>
    <div class="musicLyric" ref="musiclyric" v-show="isLyricShow">
      <p v-for="item in lyric" :key="item"
        :class="{ active: (currentTime * 1000 >= item.time && currentTime * 1000 < item.pre) }">
        {{ item.lrc }}
      </p>
    </div>
    <div class="detailFooter">
      <div class="footerTop">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-023"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon--dunpai"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fangzi2"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-tools-1"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fangzi1"></use>
        </svg>
      </div>
      <div class="footerContent">
        <input type="range" class="range" min="0" :max="duration" v-model="currentTime" step="0.05">
      </div>
      <div class="footer">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fanhui3"></use>
        </svg>
        <svg class="icon" aria-hidden="true" @click="goPlay(-1)">
          <use xlink:href="#icon-arrow-left-bold"></use>
        </svg>
        <svg class="icon pay" aria-hidden="true" v-if="isbtnShow" @click="play">
          <use xlink:href="#icon-guanlian3"></use>
        </svg>
        <svg class="icon pay" aria-hidden="true" v-else @click="play">
          <use xlink:href="#icon-Switch"></use>
        </svg>
        <svg class="icon" aria-hidden="true" @click="goPlay(1)">
          <use xlink:href="#icon-arrow-right-bold"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-all1"></use>
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
import { Vue3Marquee } from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'
import { mapMutations, mapState } from 'vuex';
export default {
  data() {
    return {
      isLyricShow: false

    }
  },
  computed: {
    ...mapState(["lyricList", "currentTime", "playListIndex", "playList", "duration"]),
    lyric: function () {
      let arr;
      if (this.lyricList.lyric) {
        arr = this.lyricList.lyric.split(/[(\r\n)\r\n]+/).map((item, i) => {
          let min = item.slice(1, 3);
          let sec = item.slice(4, 6);
          let mill = item.slice(7, 10);
          let lrc = item.slice(11, item.length);
          let time = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);
          if (isNaN(Number(mill))) {
            mill = item.slice(7, 9);
            lrc = item.slice(10, item.length);
            time = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);
          }
          // console.log(min,sec,Number(mill),lrc);
          return { min, sec, mill, lrc, time }
        })
        arr.forEach((item, i) => {
          if (i == arr.length - 1 || isNaN(arr[i + 1].time)) {
            item.pre = 100000;
          } else {
            item.pre = arr[i + 1].time
          }

        });
        console.log(arr);
        return arr
      }
    }

  },
  components: {
    Vue3Marquee,
  },
  mounted() {
    // console.log(this.musicList);
    // console.log(this.lyricList.lyric);
    this.addDuration()
  },
  methods: {
    goPlay: function (num) {
      let index = this.playListIndex + num;
      if (index < 0) {
        index = this.playList.length - 1
      } else if (index == this.playList.length) {
        index = 0
      }
      this.updatePlayListIndex(index);
    },

    backHome: function () {

      this.isLyricShow = false
      this.updateDetailShow()
    },
    ...mapMutations(['updateDetailShow', 'updatePlayListIndex'])
  },
  props: ['musicList', 'isbtnShow', 'play', 'addDuration'],
  watch: {
    currentTime: function (newValue) {
      let p = document.querySelector("p.active")
      // console.log([p]);
      if (p) {
        if (p.offsetTop > 300) {
          this.$refs.musiclyric.scrollTop = p.offsetTop - 300
        }
      }
      if (newValue === this.duration) {
        this.updatePlayListIndex(this.playListIndex + 1);
        if (this.playListIndex === this.playList.length - 1) {
          this.updatePlayListIndex(0);
        }
      }

      // console.log([this.$refs.musiclyric]);
    }
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

.main {
  width: 100%;
  height: 100%;



  .bgimg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    filter: blur(80px);

  }

  .detailTop {
    width: 100%;
    height: 1rem;
    padding: 0.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    fill: #fff;

    .detailTopLeft {


      display: flex;
      align-items: center;

      .leftMarquee {
        width: 2rem;
        height: 100%;
        margin-left: 0.4rem;

        span {
          font-size: 0.2rem;
          color: #999;
        }

        .icon {
          width: 0.3rem;
          height: 0.3rem;
          fill: #999;
          position: relative;
          top: 0.06rem;

        }
      }

    }

    .detailTopRight {
      .icon {
        width: 0.7rem;
        height: 0.7rem;
      }
    }

  }

  .detailContent {
    width: 100%;
    height: 9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    .img_needle {
      width: 2rem;
      height: 3rem;
      position: absolute;
      left: 46%;
      transform-origin: 0 0;
      transform: rotate(-14deg);
      transition: all 2s;


    }

    .img_needle_active {
      width: 2rem;
      height: 3rem;
      position: absolute;
      left: 46%;
      transform-origin: 0 0;
      transform: rotate(0deg);
      transition: all 2s;


    }

    @keyframes rotate_ar {
      0% {
        transform: rotateZ(0deg);
      }

      100% {
        transform: rotateZ(360deg);
      }
    }

    .img_cd {
      width: 5rem;
      height: 5rem;
      position: absolute;
      bottom: 2.3rem;
      z-index: -1;
    }

    .img_ar {
      width: 3.2rem;
      height: 3.2rem;
      border-radius: 50%;
      position: absolute;
      bottom: 3.14rem;
      animation: rotate_ar 10s linear infinite;
    }

    .img_ar_active {
      animation-play-state: running;
    }

    .img_ar_pauesd {
      animation-play-state: paused;
    }
  }

  .musicLyric {
    width: 100%;
    height: 9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: scroll; //溢出滚动
    margin-top: 0.2rem;

    p {
      color: rgb(47, 45, 45);
      margin-bottom: 0.2rem;
    }

    .active {
      color: #fff;
      font-size: 0.5rem;
    }
  }

  .detailFooter {
    width: 100%;
    height: 3rem;
    position: absolute;
    bottom: 0.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;


    .footerTop {
      width: 100%;
      height: 1rem;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .icon {
        width: .6rem;
        height: .6rem;
      }
    }

    .range {
      width: 100%;
      height: 0.06rem;
    }

    .footer {
      width: 100%;
      height: 1rem;
      display: flex;
      justify-content: space-around;
      align-items: center;


      .pay {
        width: .8rem;
        height: .8rem;
      }
    }
  }
}
</style>
